<template>
	<view class="content">
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item color1">A</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item color2">B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item color3">C</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="fun-mod">
			<view class="fun-mod-list">
				<view class="fml-item" 
				v-for="(key, index) in list"
				:key="index"
				@click="goHomeItemPage(key.url)">
					<view type="success" class="iconfont" :class="key.icon"></view>
					<text>{{key.name}}</text>
				</view>
			</view>
		</view>
		<view class="property-mod l-whitespace border-t">
			<view class="property-mod-title van-hairline--top-bottom">
				<text>50</text>
				<text>总积分</text>
			</view>
			<view class="property-mod-wrap">
				<view class="property-mod-l van-hairline--right">
					<text>冻结积分</text>
					<text>0</text>
				</view>
				<view class="property-mod-r">
					<text>可用积分</text>
					<text>50</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [
					{
						url: '/pages/home/transfer/index',
						icon: 'icon-zhuanzhang',
						name: '转账'
					},
					{
						url: '/pages/home/collection/index',
						icon: 'icon-shoukuanma-',
						name: '收款'
					},
					{
						url: '/pages/home/withdraw/index',
						icon: 'icon-chongbitibi',
						name: '提币'
					},
					{
						url: '/pages/home/integral-trade/index',
						icon: 'icon-gaiicon-',
						name: '积分交易'
					},
					{
						url: '/pages/home/trading-record/index',
						icon: 'icon-jiaoyijilu',
						name: '交易记录'
					},
					{
						url: '/pages/home/invite/index',
						icon: 'icon-yaoqing',
						name: '邀请'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			goHomeItemPage (url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}
	swiper {
		height: 400upx;
	}
	.uni-padding-wrap {
		width: 750upx;
		padding: 0;
	}
	.swiper-item {
		margin-bottom: 20upx;
		height: 100vh;
	}
	.page-section {
		margin-bottom: 20upx;
	}
	.fun-mod {
		margin-bottom: 20upx;
		background-color: #ffffff;
		box-shadow: 0 5px 20px 0 rgba(11,84,151,0.15);
		&-list{
			display: flex;
			flex-wrap: wrap;
			.fml-item {
				width: 250upx;
				padding: 20upx 0;
				font-size: 28upx;
				text-align: center;
				text {
					display: block;
					margin-top: 16upx
				}
			}
		}
	}
	
	.property-mod {
		padding: 0 30upx;
		margin-bottom: 30upx;
		border-radius: 8upx;
		&-title {
			padding: 10upx 30upx;
			color: #fff;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			text-align: center;
			background: #308afd;
			box-shadow: 0 4upx 10upx 0 rgba(4,103,231, .5);
		}
		&-wrap {
			display: flex;
			justify-content: space-between;
			padding: 20upx;
			text-align: center;
			background: #308afd;
		}
		&-l,
		&-r{
			width: 50%;
		}
		& text {
			display: block;
			width: 100%;
		}
	}
	
	.uni-icon {
		width: 100%;
		font-size: 42upx
	}
	.color1 {
		background-color: #8F8F94;
	}

	.color2 {
		background-color: #000;
	}

	.color3 {
		background-color: #432222;
	}
</style>
